<template>
    <div class="inventory-summary-container">
        <!-- 搜索栏 -->
        <el-row>
            <el-col :span="24" style="padding-top: 0px; padding-left: 24px;">
                <el-form :inline="true" :model="filter" class="demo-form-inline">
                    <el-form-item label="编号">
                        <el-input v-model="filter.code" placeholder="商品编号" clearable />
                    </el-form-item>
                    <el-form-item label="名称">
                        <el-input v-model="filter.subCommodityName" placeholder="商品名称" clearable />
                    </el-form-item>
                    <el-form-item label="规格">
                        <el-input v-model="filter.standName" placeholder="商品规格" clearable />
                    </el-form-item>

                    <category-select v-model="filter.category"
                    label="类别"
                    :basic-ui-action="basicUiAction"
                        @change="handleCategoryChange" />

                    <el-form-item>
                        <el-button type="primary" @click="handleSearch">查询</el-button>
                        <el-button @click="resetSearch">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>

        <!-- 数据列表 -->
        <el-row>
            <el-table v-loading="loading" :data="inventoryDataList" style="width: 100%" border>
                <el-table-column label="图片" align="center" width="100">
                    <template #default="scope">
                        <el-image style="width: 60px; height: 60px" :src="scope.row.subCommodity.imgs"
                            :preview-src-list="[scope.row.subCommodity.imgs]" fit="cover"
                            v-if="scope.row.subCommodity.imgs">
                            <template #error>
                                <div class="image-slot">
                                    <el-icon>
                                        <Picture />
                                    </el-icon>
                                </div>
                            </template>
                        </el-image>
                        <div v-else class="empty-image">
                            <el-icon>
                                <Picture />
                            </el-icon>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column prop="subCommodity.code" label="编号" align="center" width="120" />

                <el-table-column prop="subCommodity.name" label="商品名称" align="center" show-overflow-tooltip />

                <el-table-column label="类别" align="center" width="100">
                    <template #default="scope">
                        {{ scope.row.subCommodity.category?.name || '-' }}
                    </template>
                </el-table-column>

                <el-table-column prop="subCommodity.standard" label="规格" align="center" width="100" />

                <el-table-column label="单位" align="center" width="80">
                    <template #default="scope">
                        {{ scope.row.subCommodity.unit?.name || '-' }}
                    </template>
                </el-table-column>

                <el-table-column prop="availableCount" label="可用库存" align="right" width="100">
                    <template #default="scope">
                        {{ formatCount(scope.row.availableCount) }}
                    </template>
                </el-table-column>

                <el-table-column prop="totalInventoryCount" label="当前库存" align="right" width="100">
                    <template #default="scope">
                        {{ formatCount(scope.row.totalInventoryCount) }}
                    </template>
                </el-table-column>

                <el-table-column prop="waitInCount" label="待入库" align="right" width="100">
                    <template #default="scope">
                        {{ formatCount(scope.row.waitInCount) }}
                    </template>
                </el-table-column>

                <el-table-column prop="waitOutCount" label="待出库" align="right" width="100">
                    <template #default="scope">
                        {{ formatCount(scope.row.waitOutCount) }}
                    </template>
                </el-table-column>

                <el-table-column prop="singleCost" label="库存单价" align="right" width="120">
                    <template #default="scope">
                        {{ formatCurrency(scope.row.singleCost) }}
                    </template>
                </el-table-column>

                <el-table-column prop="totalCost" label="库存金额" align="right" width="120">
                    <template #default="scope">
                        {{ formatCurrency(scope.row.totalCost) }}
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <!-- 分页 -->
        <div style="margin-top: 20px; text-align: right">
            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="fetchInventoryData" />
        </div>

    </div>
</template>

<script>
import { ElMessage } from 'element-plus'
import { Picture } from '@element-plus/icons-vue'
import { InventoryUiAction } from '../../public/engine/uiAction/inventoryUiAction'
import { Definition } from '../../public/engine/common/definition'
import { DataPage } from '../../public/network/communicationConverter'
import { Util } from '../../public/utils/util'
import { SubCommodityInventorySumFilter } from '../../public/engine/commodity/subCommodityInventorySum'
import CategorySelect from '../../public/views/componentsWeb/CategorySelect.vue'
import { BasicUiAction } from '../../public/engine/uiAction/basicUiAction'

export default {
    name: 'SubcommodityInventorySumPage',
    components: {
        Picture,
        CategorySelect
    },
    data() {
        return {
            loading: false,
            inventoryDataList: [],
            total: 0,
            searchForm: {
                code: '',
                name: '',
                standard: '',
                category: null,
            },
            queryParams: {
                pageNum: 1,
                pageSize: Definition.gDefualPageSize
            },
            inventoryUiAction: new InventoryUiAction(),
            filter: new SubCommodityInventorySumFilter(),
            basicUiAction: new BasicUiAction(),
        }
    },
    mounted() {
        this.filter.needCostData = 1;
        this.fetchInventoryData()
    },
    methods: {
        async fetchInventoryData() {
            try {
                this.loading = true

                const res = await this.inventoryUiAction.getSubCommodityInventorySumData({
                    pageInfo: new DataPage(this.queryParams.pageNum, 0, this.queryParams.pageSize),
                    filter: this.filter.toJson()
                })



                if (res && res.data && res.data.dataList) {
                    // console.log("Got Inventory Sum data:", res.data);
                    this.inventoryDataList = res.data.dataList
                    this.total = res.data.pageInfo.total
                } else if (res.resErr) {
                    ElMessage.error('获取库存数据失败')
                }
            } catch (error) {
                console.error('获取库存数据失败:', error)
                ElMessage.error('获取库存数据失败')
            } finally {
                this.loading = false
            }
        },

        handleSearch() {
            this.queryParams.pageNum = 1
            this.fetchInventoryData()
        },

        resetSearch() {
            this.filter.clear();

            this.queryParams.pageNum = 1
            this.fetchInventoryData()
        },

        formatCurrency(value) {
            return Util.getFundString(value)
        },

        formatCount(value) {
            return Util.getCountString(value)
        },

        handleCategoryChange(val) {
            // 分类选择变化时的处理
            //console.log('Selected category:', val)
            this.filter.category = val;
        },
    }
}
</script>

<style scoped>
.inventory-summary-container {
    padding: 20px;
}

.table-card {
    margin: 20px;
}

.image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    color: #909399;
}

.empty-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    background: #f5f7fa;
    color: #909399;
}
</style>